<template>
  <div>
<!--    <h3>当前最新的count值为：{{count}}</h3>-->
    <h3>{{showNum}}</h3>
    <button @click="sub">-1</button>
    <button @click="subN(3)">-N</button>
    <button @click="subAsync">-1 Async</button>
    <button @click="subAsyncN(3)">-N Async</button>
  </div>
</template>

<script>
// 1.从vuex中按需导入mapState函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Subtraction',
  data () {
    return {}
  },
  // 2.将全局数据映射为当前组件的计算属性
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    // 在对应组件中，将指定 mutation 函数，映射为当前组件的methods函数
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subAsyncN'])
  }
}
</script>

<style scoped>

</style>
